import React, { Component } from 'react';
import './index.css'

class Modal extends Component {
	static defaultProps = {
		visible: false,
		opacity: .7,
		scrollStyle: ''
	}

	state = {

	}
	componentDidUpdate() {
		const { visible } = this.props;
		console.log('visible', visible);

		const scrollStyle = visible
			? document.body.style.overflow = 'hidden'
			: document.body.style.overflow = ''
		document.body.style.paddingRight = '';
		this.setState({ scrollStyle })
	}
	render() {
		const { visible, opacity } = this.props;
		const { scrollStyle } = this.state
		const opacityStyle = {
			backgroundColor: `rgba(0,0,0,${opacity})`
		};
		return (
			<div className='__modal_wrapper' style={[opacityStyle, scrollStyle]}>
				{this.props.children}
			</div>
		)
	}
}
export default Modal;
